<template>
  <div class="index">
    <!-- 侧边栏 -->
    <side-bar></side-bar>

    <router-view></router-view>
    <picture-viewer></picture-viewer>
    <right-click-menu></right-click-menu>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
import { io } from 'socket.io-client'
import { api_getLogin } from '@/api/user'
import SideBar from '@/components/SideBar.vue'
import PictureViewer from '@/components/PictureViewer.vue'
import RightClickMenu from '@/components/RightClickMenu'

export default {
  name: 'HomeView',
  components: {
    SideBar,
    PictureViewer,
    // HelloWorld,
    RightClickMenu,
  },
  data () {
    return {
    }
  },
  async created () {
    // 如果vuex中没有用户信息，则判断是否处于登录状态
    if (!this.$store.state.userInfo) {
      // 判断是否登录
      let res = await api_getLogin().catch(() => {
        this.$router.push('/login')
      })
      if (res.data.code === 200) {
        this.$store.commit('setUserInfo', res.data.userInfo)
      } else {
        console.log('未登录')
        this.$router.push('/login')
      }
    }

    // 建立websocket连接
    //此处本来根据跨域应该为const socket = io('/socket.io'),但是socketio的请求地址默认自带socket.io，所以此处只要传入'/'
    window.$socket = io('/')

    // 添加登录信息
    // window.$socket.emit('login', this.$store.state.userInfo)

    // 接收聊天信息
    window.$socket.on('chat', (data) => {
      // this.chatList.push(data)
      this.$bus.$emit('chat', data)
    })

    // 接收通知信息
    window.$socket.on('message', this.MsgHandler)
  },
  methods: {
    // 通知的分类处理方法
    MsgHandler (msg) {
      switch (msg.msgType) {
        case 'chat':
          // this.sendMsgSuccess(msg)
          this.chatHandler(msg)
          break
        case 'login':
          this.LoginHandler(msg)
          break
        case 'friendRequest':
          this.friendReqHandler(msg)
          break;
      }
    },

    // 登录信息处理
    LoginHandler (msg) {
      switch (msg.status) {
        case 'success':
          // console.log('login success')
          // 将通知发送给sessionList，以更新sessionList
          this.$bus.$emit('notice', msg)
          break
        case 'logout':
          // console.log('您的账号已在别的地方登录')
          this.$message.warning('您的账号已在别的地方登录!')
          window.$socket.disconnect()
          this.$router.push('/login')
          break
      }
    },

    // 处理好友请求的回调
    friendReqHandler (msg) {
      this.$notification.open({
        message: '添加好友请求',
        description: `${msg.userInfo.userName}:\n${msg.content}`,
        // 通知类型 + 用户id
        key: `${msg.msgType}+${msg.userInfo.userId}`,
        onClick: () => {
          // console.log('Notification Clicked!');
          this.$store.commit('setCurrentFriend', { id: -1 })
          this.$router.push('/friend')
          this.$notification.close(`${msg.msgType}+${msg.userInfo.userId}`)
        },
      });
    },

    // 聊天的回调
    chatHandler (msg) {
      if (msg.status === 'success') {
        // 成功
        this.$bus.$emit('sendMsgSuccess', msg)
      } else {
        // 失败
        this.$message.error(msg.content)
        this.$bus.$emit('sendMsgFail', msg)
      }

    },

  },
}
</script>

<style scoped>
.index {
  display: flex;
  height: 100vh;
  background-size: cover;
  position: relative;
}
</style>
